<template>
	<view>
		<u-navbar back-text="" :title="title" z-index=100000 :border-bottom="false"></u-navbar>
		<view class="map" :style="{height: navbarHeight}">
			<!-- <map style="width: 100%; height: 100%;" :latitude="latitude" :circles="circles" :show-location="true" :longitude="longitude" :markers="covers"></map> -->
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				title: '',
				latitude: 39.909,
				longitude: 116.39742,
				disabled: false,
				circles: [
					{
						latitude: 39.909,
						longitude: 116.39742,
						color: '#3c7eff45',
						fillColor: '#3c7eff45',
						radius: 300,
					}
				],
				covers: [ // 设置标记点
					{
						id:0,
						latitude: 39.909,//纬度
						longitude: 116.39742,//经度
						iconPath: '/static/icon-clock.png',    //显示的图标
						width: 69.33,   //宽
						height:75.4   //高
					},
					{
						id:1,
						latitude: 39.9065,//纬度
						longitude: 116.3979,//经度
						iconPath: '/static/icon-clock1.png',    //显示的图标
						width: 48,   //宽
						height: 52,   //高
						customCallout: {
							// content: '你已进到打卡区域',
							// color: '#FFFFFF',
							// fontSize: 14,
							// borderRadius: 8,
							// bgColor: '#3C7EFF',
							// display: 'BYCLICK',
							// textAlign: 'center',
							anchorY: 0,  
							anchorX: 0,  
							display: 'ALWAYS'
						}
					}
				]
			};
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return `calc(100vh - 88px)`;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 88 : 96;
				return `calc(100vh - ${height} + 'px')`;
				// #endif
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.title = option.title
		},
	}
</script>

<style lang="scss" scoped>
.map {
	// width: 100%;
	// height: calc(100vh - var(--window-top) - 188rpx);
	background: hotpink;
	::v-deep .amap-logo {
	  opacity: 0 !important;
	}
	::v-deep .amap-copyright {
	  opacity: 0 !important;
	}
}
</style>
